<template>
    <div>
        <div>one</div>
        <div>{{ flag }}</div>
        <button @click="change">change</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            flag: true
        }
    },
    methods: {
        change() {
            this.flag = !this.flag;
        }
    },
    beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter', to);
        console.log('beforeRouteEnter', from);
        next();
    },
    beforeRouteUpdate(to, from, next) {
        console.log('beforeRouteUpdate', to);
        console.log('beforeRouteUpdate', from);
        next();
    },
    beforeRouteLeave(to, from, next) {
        console.log('beforeRouteLeave', to);
        console.log('beforeRouteLeave', from);
        next();
    },
}
</script>
<style></style>